<template>
	<div class="dashboard-container">
		<div class="dashboard-text">name:{{ name }}</div>
		<div class="dashboard-text">roles:<span :key="role" v-for="role in roles">{{ role }}</span></div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'

	export default {
		name: 'Dashboard',
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.dashboard {
		&-container {
			margin: 30px;
		}

		&-text {
			font-size: 30px;
			line-height: 46px;
		}
	}
</style>
